<template>
    <div class="fillContain">
        <head-top></head-top>

        <el-form :inline="true" ref="form" :model="form" size="mini" label-width=""  style="width: 95%;margin-left: 40px">
            <el-form-item label="模板名称" prop="reportName">
                <el-input v-model="form.tempName" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="服务器">
                <el-select v-model="form.serverId" filterable clearable placeholder="请选择服务器">
                    <el-option v-for="item in servers" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板类型">
                <el-select v-model="form.tempType" filterable placeholder="请选择模板类型">
                    <el-option v-for="item in tempTypes" :key="item.VALUE" :label="item.NAME"
                               :value="item.VALUE"></el-option>
                </el-select>
            </el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button size="mini" type="primary" icon="el-icon-upload" @click="tempUpload()"
                       style="margin-left: 100px">上传模板
            </el-button>
        </el-form>

        <el-table
                ref="singleTable"
                :data="tableData"
                border
                style="width: 95%;margin-left: 40px"
                height="580px"
                max-height="100%"
                @current-change="handleCurrentRowChange">
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="id"
                    width="50px"
                    label="ID">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="tempName"
                    label="模板名称">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="serverId"
                    width="80px"
                    label="服务器ID"
                    v-if="false">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="serverName"
                    width="80px"
                    label="服务器">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="uploadPath"
                    label="上传路径">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="tempType"
                    width="100px"
                    label="模板类型"
                    :formatter="tempFormatter">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="createTime"
                    width="160px"
                    label="上传时间">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    fixed="right"
                    width="90px"
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-download" @click="deleteTemp(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts">
        </el-pagination>

        <!--上传按钮弹窗-->
        <el-dialog :title="minititle" :visible.sync="dialogFormUpload" width="50%">
            <upload-component></upload-component>
        </el-dialog>
    </div>
</template>

<script>

    import {getServers} from '@/api/reportDownload'
    import {getTempUpload,deleteTemp} from '@/api/tempUploadLog'
    import HeadTop from '@/views/main-components/HeadTop.vue'
    import {ListSysDict} from '@/api/reportData'
    import UploadComponent from '@/views/my-components/tempUpload/UploadComponent.vue'

    export default {
        created: function () {
            //this.getUserInfo();
            this.getDictByCodeAndVal();
            this.getServers();
            this.getTempType();
            this.search();
        },
        data() {
            return {
                tableData: [],
                currentRow: null,
                name: '',
                minititle : '上传模板',
                dialogFormUpload : false,
                form: {
                    tempName: '',
                    tempType: ''
                },
                servers: [],
                reportCategoryIds: [],
                tempTypes: [],
                counts: 0,
                currentPage: 1,
                pageSize: 10,
                statusMap: new Map(),
            }
        },
        components: {
            HeadTop,
            UploadComponent
        },
        methods: {
            /**
             *测试用户权限
             */
            /*            async getUserInfo(){
                            let STAFF_ID=this.$utils.getUrlKey("STAFF_ID");
                            let OPERATE_TIME=this.$utils.getUrlKey("OPERATE_TIME");
                            let TRADE_ID=this.$utils.getUrlKey("TRADE_ID");
                            let SIGNMSG=this.$utils.getUrlKey("SIGNMSG");
                            let channel='reportDownload';

                            if (STAFF_ID=="1" ||this.$utils.getUrlKey("STAFF_ID")==null){
                                this.getServers();
                                this.getCategory();
                                this.getDictByCodeAndVal();
                                this.getStates();
                                this.search();
                            }else {
                                let userinfo= await this.getUser(STAFF_ID,OPERATE_TIME,TRADE_ID,SIGNMSG,channel);
                                if (userinfo.isPression){
                                    this.getServers();
                                    this.getCategory();
                                    this.getDictByCodeAndVal();
                                    this.getStates();
                                    this.search();
                                }else{
                                    this.$router.push({path: '/404',query:{ msg:userinfo.msg}});
                                }
                            }


                        },*/
            //监听页面变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.search();
            },
            //监听选中行数
            handleCurrentRowChange(val) {
                this.currentRow = val;
                //alert(this.currentRow.address);
            },
            //监听页面选择变化
            handleCurrentChange(val) {
                this.currentPage = val;
                this.search();
            },
            /**
             * 获取字典信息
             */
            async getDictByCodeAndVal() {
                let params = {
                    type: 'dict',
                    dictCode: "TEMP_TYPE"
                };
                let dictSQL = await ListSysDict(params);
                dictSQL.forEach(dict => {
                    this.statusMap.set(dict.VALUE, dict.NAME);
                })
            },
            //table字段转换
            tempFormatter: function (row) {
                return this.statusMap.get(row.tempType);
            },
            async getServers() {
                let reply = await getServers();
                let all = {
                    name: "全部",
                    value: ''
                }
                reply.unshift(all);
                this.servers = reply;
            },
            async getTempType() {
                let params = {
                    type: 'dict',
                    dictCode: "TEMP_TYPE"
                };
                let reply = await ListSysDict(params);
                let all = {
                    NAME: "全部",
                    VALUE: ''
                }
                reply.unshift(all);
                this.tempTypes = reply;
            },
            //查询
            async search() {
                let params = {
                    size: this.pageSize,
                    current: this.currentPage,
                    tempName: this.form.tempName,
                    serverId: this.form.serverId,
                    tempType: this.form.tempType
                };
                let reply = await getTempUpload(params);
                if (reply.code == 200) {
                    this.counts = reply.data.total;
                    this.currentPage = reply.data.pageNum;
                    this.tableData = reply.data.list;
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: reply.msg
                    });
                }

            },
            async deleteTemp(row) {
                console.log(row);
                let params = {
                    id : row.id,
                    serverId : row.serverId,
                    tempName : row.tempName
                }
                this.$msgbox({
                    title: '提示',
                    message: "此操作将删除该条数据, 是否继续?",
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            let reply = await deleteTemp(params);
                            if (reply) {
                                this.search();
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: reply.msg
                                });
                            }
                        }
                        done();
                    }
                }).then(action => {
                });

            },
            tempUpload() {
                this.dialogFormUpload = true;
            },

        }
    }
</script>

<style scoped>

</style>